<template>
  <div class="capability-management-guide">
    <a-modal
      :open="visible"
      title="能力管理使用指南"
      width="800px"
      @cancel="handleClose"
      :footer="null"
    >
      <div class="guide-content">
        <div class="guide-sections">
          <section class="guide-section">
            <h3>📋 能力管理概述</h3>
            <p>
              能力管理系统定义了资源可以执行的操作和功能，支持复杂业务场景的能力编排：
            </p>
            <a-row :gutter="16" style="margin-top: 16px">
              <a-col :span="8">
                <a-card size="small" class="capability-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:api-outlined" />
                    基础能力
                  </template>
                  <p>资源的基本操作能力</p>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small" class="capability-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:cluster-outlined" />
                    组合能力
                  </template>
                  <p>多个基础能力的组合</p>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small" class="capability-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:deployment-unit-outlined" />
                    扩展能力
                  </template>
                  <p>通过插件扩展的能力</p>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>⚙️ 能力配置指南</h3>

            <h4>创建能力定义</h4>
            <a-steps direction="vertical" size="small">
              <a-step title="定义能力" description="创建能力的基本信息和描述" />
              <a-step
                title="配置参数"
                description="设置能力执行所需的输入参数"
              />
              <a-step title="定义结果" description="配置能力执行后的输出结果" />
              <a-step
                title="设置权限"
                description="配置能力的访问权限和执行条件"
              />
            </a-steps>

            <h4 style="margin-top: 24px">能力类型说明</h4>
            <a-descriptions :column="1" bordered size="small">
              <a-descriptions-item label="查询能力">
                用于获取资源信息，如查询状态、属性等
              </a-descriptions-item>
              <a-descriptions-item label="修改能力">
                用于更新资源信息，如修改属性、状态等
              </a-descriptions-item>
              <a-descriptions-item label="操作能力">
                用于执行特定操作，如启动、停止、重启等
              </a-descriptions-item>
              <a-descriptions-item label="计算能力">
                用于执行计算任务，如统计分析、数据处理等
              </a-descriptions-item>
            </a-descriptions>
          </section>

          <section class="guide-section">
            <h3>💡 最佳实践</h3>

            <a-alert
              message="能力粒度设计"
              description="合理设计能力的粒度，避免过于复杂或过于简单"
              type="info"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="参数验证"
              description="为能力参数设置严格的验证规则，确保数据安全"
              type="warning"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="权限控制"
              description="根据业务需求设置适当的能力访问权限"
              type="success"
              show-icon
            />
          </section>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  visible: boolean;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  close: [];
}>();

// 方法
const handleClose = () => {
  emit('close');
};
</script>

<style lang="less" scoped>
.capability-management-guide {
  .guide-content {
    max-height: 600px;
    overflow-y: auto;

    .guide-sections {
      .guide-section {
        margin-bottom: 32px;

        h3 {
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
          padding-bottom: 8px;
          margin-bottom: 16px;
        }

        h4 {
          color: #333;
          margin-bottom: 12px;
        }

        .capability-card {
          .ant-card-head-title {
            display: flex;
            align-items: center;
            gap: 8px;
          }
        }
      }
    }
  }
}
</style>
